<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-11-24 16:57:52
 * @FilePath: \tmsadmin\src\views\contract\contract\components\table.vue
-->

<template>
  <el-table :data="props.tableData" v-loading="props.loading" style="width: 100%"
    :header-cell-style="{ background: '#FAFAFA', color: 'rgba(0,0,0,0.85)' }"
    :default-sort="{ prop: 'createTime', order: 'descending' }" @selection-change="handleSelectionChange">
    <template #empty>
      <div class="v2-table__empty-data v2-table__empty-border" style="width: 100%">
        <div class="v2-table__empty-default">
          <div style="padding-top: 40px; height: 50px">
            <i class="icon ion-ios-briefcase-outline" style="font-size: 60px" />
          </div>
          <span>暂无数据</span>
        </div>
      </div>
    </template>
    <el-table-column type="selection" fixed="left" align="center" width="50" />
    <el-table-column v-for="item in tableColumns" :key="item.id" :fixed="item.fixed" :prop="item.prop"
      :label="item.title" :min-width="item.minwidth" :sortable="item.sortable" :filters="item.filters"
      :align="item.align" :filter-method="item.filters && filterHandler" :show-overflow-tooltip="true">
      <template #default="scope">
        <template v-if="item.prop == 'actionss'">
          <el-button size="small" type="primary" @click="showEdit(scope.row)">
            查看合同
          </el-button>
          <el-button size="small" type="danger" @click="showDelete(scope.row)">
            删除
          </el-button>
        </template>
        <template v-else-if="item.prop == 'index'">
          {{ scope.$index + 1 }}
        </template>
        <template v-else-if="item.prop == 'isDriver'">
          <span v-if="scope.row[item.prop] == 1">司机</span>
          <span v-else-if="scope.row[item.prop] == 0">录入员</span>
          <span v-else-if="scope.row[item.prop] == 2">合同管理员</span>
          <span v-else-if="scope.row[item.prop] == 3">仓库管理员</span>
          <span v-else-if="scope.row[item.prop] == 4">官网管理员</span>

        </template>
        <template v-else-if="item.prop == 'faceUrl'">
          <!-- 全屏预览图片 -->
          <el-popover v-if="scope.row[item.prop]" placement="top" width="500" trigger="hover" title="查看图片">
            <img :src="scope.row[item.prop]" style="width: 480px;" />
            <template #reference>
              <el-image :src="scope.row[item.prop]" style="width: 50px;height: 50px;" />

            </template>
          </el-popover>
          <!-- <el-image v-if="scope.row[item.prop]" :src="scope.row[item.prop]" style="width: 50px;height: 50px;" /> -->
          <span v-else>--</span>
        </template>
        <template v-else-if="item.prop == 'plateNumber'">
          <span v-if="scope.row.isDriver == 1">{{ scope.row[item.prop] }}</span>
          <span v-else>-</span>
        </template>
        <template v-else-if="item.prop == 'status'">
          <span style="color:red" v-if="scope.row.status == 1">未签署</span>
          <span style="color:green" v-else>已签署</span>
        </template>
        <template v-else>
          {{ scope.row[item.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <div style="line-height: 32px;">
    </div>
    <el-pagination v-model:current-page="props.pageNum" v-model:page-size="props.pageSize"
      :page-sizes="[10, 30, 50, 100]" :background="true" layout="sizes, prev, pager, next" :total="props.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="dialogVisible" :title="'预览'" width="768px" :append-to-body="true" :before-close="handleClose">
    <div class="dialog-body">
      <div class="pdfBox" style="position: relative;">
        <div v-html="lookObj.contractUrl" v-if="lookObj.status == 1" @click="editFormModal"></div>

        <iframe :src="lookObj.contractUrl" v-else frameborder="0" style="width: 100%;height: 60vh"></iframe>
        <!-- {{ lookObj.contractUrl }} -->
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">关闭</el-button>
        <el-button type="primary" v-if="lookObj.status == 2" @click="exportss(lookObj)">下载合同</el-button>

      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisibles" :title="'编辑运费'" width="500px" :append-to-body="true" :before-close="handleCloses">
    <div class="dialog-body">
      <!-- 表单 运费总金额 预付运费金额 回付运费金额-->
      <el-form :model="editForms" ref="editFormRef" :rules="rules" label-width="120px">
        <el-form-item label="运费总金额" prop="totalFreight">
          <el-input v-model="editForms.totalFreight"></el-input>
        </el-form-item>
        <el-form-item label="预付运费金额" prop="prepayFreight">
          <el-input v-model="editForms.prepayFreight"></el-input>
        </el-form-item>
        <el-form-item label="回付运费金额" prop="returnFreight">
          <el-input v-model="editForms.returnFreight"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloses()">取消</el-button>
        <el-button type="primary" @click="submit(editFormRef)">确定</el-button>

      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage } from 'element-plus'
import { REQUEST } from '@/api/request'
import { onMounted } from 'vue'
import { ref } from 'vue'
const emits = defineEmits(['change', 'edit', 'ok', 'selectionChange', 'remark'])
const props = defineProps({
  tableData: { type: Array, default: [] },
  tableColumns: { type: Array, default: [] },
  pageSize: { type: Number, default: 10 },
  pageNum: { type: Number, default: 1 },
  total: { type: Number, default: 0 },
  loading: { type: Boolean, default: false }
})
const editFormRef = ref({})
const loading = ref(false)

const handleSizeChange = (val: number) => {
  emits('change', {
    pageNum: props.pageNum,
    pageSize: val
  })
}
const dialogVisibles = ref(false)
const handleCloses = () => {
  editForms.value = {
              totalFreight: '',
              prepayFreight: '',
              returnFreight: ''
            }
  dialogVisibles.value = false
}
const lookObj = ref({})
const exportss = (obj: string) => {
  const a = document.createElement('a')
  a.href = obj.contractUrl

  a.target = '_blank'
  a.download = obj.staff + '合同'
  a.click()
}
const dialogVisible = ref(false)
const status = ref(1)
const url = ref('')
const editContract = ref('<div class="ql-align-justify"><span style="color: rgb(0, 0, 0);">&nbsp;&nbsp;&nbsp;2、运费总金额</span><strong style="color: rgb(192, 0, 0);"><u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u></strong><span style="color: rgb(0, 0, 0);">元，预付运费</span><strong style="color: rgb(192, 0, 0);">__<u>&nbsp;</u>_</strong><span style="color: rgb(0, 0, 0);">元，回付运费</span><u style="color: rgb(0, 0, 0);">&nbsp;&nbsp;&nbsp;&nbsp;</u><strong style="color: rgb(192, 0, 0);"><u>&nbsp;&nbsp;&nbsp;</u></strong><u style="color: rgb(0, 0, 0);">&nbsp;&nbsp;</u><span style="color: rgb(0, 0, 0);">元。</span></div><div class="ql-align-justify">&nbsp;</div><div class="ql-align-justify"><span style="color: rgb(0, 0, 0);">&nbsp;&nbsp;&nbsp;')
const editForms = ref({
  totalFreight: '',
  prepayFreight: '',
  returnFreight: ''
})
const editFormModal = ()=>{
  dialogVisibles.value = true
}
const rules = ref({
  totalFreight: [{ required: true, message: '请输入运费总金额', trigger: ['change'] }],
  prepayFreight: [{ required: true, message: '请输入预付运费金额', trigger: ['change'] }],
  returnFreight: [{ required: true, message: '请输入回付运费金额', trigger: ['change'] }]
})

const handleCurrentChange = (val: number) => {
  emits('change', {
    pageNum: val,
    pageSize: props.pageSize
  })
}
const price1s = ref(null)
const price2s = ref(null)
const price3s = ref(null)
const submit = async (formEl: any) => {
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      const price1 = `<span id="price1">${editForms.value.totalFreight}</span>`
      const price2 = `<span id="price2">${editForms.value.prepayFreight}</span>`
      const price3 = `<span id="price3">${editForms.value.returnFreight}</span>`
      // str1 替换 lookObj.contractUrl 中得 str
      const str2 = lookObj.value.contractUrl.replaceAll(price1s.value.outerHTML, price1)
      const str3 = str2.replaceAll(price2s.value.outerHTML, price2)
      const str4 = str3.replaceAll(price3s.value.outerHTML, price3)
      REQUEST.POST('CONTRACT', {
        list: [
          {
            contractUrl: str4,
            userId: lookObj.value.userId,
            templateId: lookObj.value.templateId,
            houseId: lookObj.value.houseId,
            contractNo: lookObj.value.contractNo
          }
        ]
      }).then((res: any) => {
        REQUEST.POST('DELCONTRACT', { ids: [lookObj.value.id] }).then((res: any) => {
          if (res.status == 200) {
            ElMessage.success('编辑成功')
            dialogVisibles.value = false
            dialogVisible.value = false
            editForms.value = {
              totalFreight: '',
              prepayFreight: '',
              returnFreight: ''
            }
            emits('ok')
          } else {
            ElMessage.error(res.msg)
          }
        })
      })
    }
  })
}
const filterHandler = (value: any, row: any, column: any) => {
  const property = column.property
  return row[property] === value
}

const showEdit = (row: any) => {
  dialogVisible.value = true
  lookObj.value = row
  setTimeout(() => {
    price1s.value = document.getElementById('price1')
    price2s.value = document.getElementById('price2')
    price3s.value = document.getElementById('price3')
    console.log(price1s.value.outerHTML,'11')
    editForms.value.totalFreight = price1s.value.innerText
    editForms.value.prepayFreight = price2s.value.innerText
    editForms.value.returnFreight = price3s.value.innerText
  }, 100)
  // const price1s = document.getElementById('price1')
  // status.value = row.status
  // url.value = row.contractUrl
}
const showDelete = (row: any) => {
  ElMessageBox.confirm('确定删除该合同吗？', '提示', {
    distinguishCancelAndClose: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    REQUEST.POST('DELCONTRACT', { ids: [row.id] }).then((res: any) => {
      if (res.status == 200) {
        ElMessage.success('删除成功')
        emits('ok')
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}
const handleClose = () => {
  lookObj.value = {}
  dialogVisible.value = false
}
const handleSelectionChange = (row: any) => {
  emits('selectionChange', row)
}

</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: space-between;
  align-self: center;
  margin-top: 20px;
}
</style>
